<template>
	<view class="viewport">

		<!-- 已登录页面 -->
		<view class="loginbox" v-if="isLogin">
			<!--  表头 -->
			<view class="header">
				<!-- userInfo.avatarUr -->
				<image class="loginIcon" :src="imageFile" mode="scaleToFill" @tap="selectedPhoto"></image>
				<view class="loginNick">{{userInfo.nickName || '小雅'}}</view>
			</view>
			<!--  足迹 -->
			<view class="container">
				<view class="itemList">
					<view class="item" v-for="(item,index) in usermenu">
						<view class="count">{{item.count}}</view>
						<view class="text">{{item.name}}</view>
					</view>
				</view>
				<!-- 我的订单 -->
				<view class="order">
					<view class="order__title">我的订单</view>
					<view class="order__list">
						<view class="list__item" v-for="(item,index) in orderMenu">
							<image class="item__icon" src="@/static/daifukuan.png" mode=""></image>
							<view class="item__text">{{item.name}}</view>
						</view>
					</view>
				</view>
				<!--  其他功能 -->
				<view class="other">
					<view class="other__itm" v-for="(item,index) in otherList" @tap="otherCellClickAction(index)">
						<view class="itm__title"> {{item.name}}</view>
						<view class="iconfont icon-youjiantou itm__arrow"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 未登录页面 -->
		<view class="notLoginbox" v-else>
			<image class="image" src="../../static/weidenglu.png" mode="aspectFit"></image>
			<view class="button" @tap="loginClick">一键登录</view>
			<!-- <button type="primary" class="button" open-type="getUserInfo" @getuserinfo="getUserInfo">一键登录</button> -->
			<view class="text">登录后尽享更多权益</view>
		</view>

		<!--  对话弹框 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog :type="dialogType" :cancelText="msgCancelText" :confirmText="msgConfirmText" :title="msgTitle"
				:content="msgContent" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false, // 是否已登录
				otherList: [{
					name: '收货地址',
					icon: 'icon-dizhi'
				}, {
					name: '联系客服',
					icon: 'icon-kefu'
				}, {
					name: '退出登录',
					icon: 'icon-tuichu'
				}],
				usermenu: [{
					count: 8,
					name: '收藏的店铺',
					icon: 'icon-dianpu',
					url: 'pages/my/my'
				}, {
					count: 12,
					name: '收藏的商品',
					icon: 'icon-shoucang',
					url: 'pages/my/my'
				}, {
					count: 60,
					name: '关注的商品',
					icon: 'icon-shoucang',
					url: 'pages/my/my'
				}, {
					count: 102,
					name: '足迹',
					icon: 'icon-shoucang',
					url: 'pages/my/my'
				}],
				orderMenu: [{
					name: '代付款',
					icon: 'icon-daifukuan',
					url: 'pages/my/my'
				}, {
					name: '待收货',
					icon: 'icon-daishouhuo',
					url: 'pages/my/my'
				}, {
					name: '退款/退货',
					icon: 'icon-tuikuan',
				},{
					name: '全部订单',
					icon: 'icon-tuikuan',
				}],


				dialogType: 'info',
				msgCancelText: '取消',
				msgConfirmText: '确定',
				msgTitle: '提示',
				msgContent: '欢迎使用 uni-popup!',
				defaultImage: '../../static/weidenglu.png',
				imageFile: '../../static/maomao.jpg',
				userInfo: {}, // 用户信息
			}
		},

		onLoad() {
       let token = uni.getStorageSync('token')
       if (token) {
         this.isLogin = true
       }
		},
		methods: {

     loginClick() {
			 this.isLogin = true
			 //  模拟登录token
			 uni.setStorageSync('token', '123456')
		 },

			getUserInfo(e) {
				console.log("----  打印: " + JSON.stringify(e));
				if (!e) return
				// 1.判断是否授权
				if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权！')
				// 2. 将用户信息存到本地
				uni.setStorageSync('userInfo', JSON.stringify(e.detail.userInfo))
				this.userInfo = e.detail.userInfo
				// 3. 更新登录状态
				this.isLogin = true
				// 4. 由于是模拟器所以无法获取 token 值
				//this.getToken(e.detail)
			},

			async getToken(info) {

				// 调用微信登录接口
				const [err, res] = await uni.login().catch(err => err)
				// 判断是否 uni.login() 调用失败
				if (err || res.errMsg !== 'login:ok') return uni.$showError('登录失败！')

				// 4. 获取用户信息
				let params = {
					code: res.code,
					encryptedData: info.encryptedData,
					iv: info.iv,
					rawData: info.rawData,
					signature: info.signature
				}
				this.$reqPost('/api/public/v1/users/wxlogin').then(res => {
					const code = res.statusCode;
					if (code == 200) {
						// 5. 登录成功后，将 token 存到本地
						uni.setStorageSync('token', res.data.token)
						// 6. 更新登录状态
						this.isLogin = true

					} else {
						uni.showToast({
							title: '登录失败!'
						});
					}
				})
			},

			selectedPhoto() {
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], // 从相册选择
					success: (res) => {
						console.log("----------- : " + JSON.stringify(res));
						this.imageFile = res.tempFilePaths[0];
						// this.defaultImage = res.tempFiles[0].path;
					}
				});
			},

			otherCellClickAction(index) {

				switch (index) {
					case 0: //  收货地址
						break;
					case 1: // 联系客服
						break;
					case 2: // 退出登录
						/** 这是阿花家的弹框
							this.msgTitle = '提示'
							this.msgContent = '确定要退出登录吗？'
							this.msgConfirmText = '确定'
							this.msgCancelText = '取消'
							this.$refs.popup.open()
							*/
						uni.showModal({
							confirmText: '确定',
							cancelText: '取消',
							title: '提示',
							content: '确定要退出登录吗？',
							success: (res) => {
								if (res.confirm) {
									// 执行退出登录操作
									console.log('用户点击了确定按钮');
									this.isLogin = false;
									uni.removeStorageSync('token')
								} else if (res.cancel) {
									console.log('用户点击了取消按钮');
								}
							}
						})
						break;
					default:
						break;
				}
			},

			//  对话框 -- 同意
			dialogConfirm() {
				console.log('点击了同意');
			},
			//  对话框 -- 取消
			dialogClose() {
				clog.log('点击了取消');
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #F4F4F4;
	}


	/**  其他功能 */
	.other {
		margin-top: 20rpx;
		background: #fff;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333;

		.other__itm {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15px 0;
			border-bottom: 1rpx solid #f4f4f4;

			&:last-child {
				border-bottom: none;
			}

			.itm__title {}

			.itm__arrow {}

		}
	}

	/**  头部的用户头像和名称  */
	.header {
		background: $uni-color-theme;
		height: 450rpx;

		display: flex;
		flex-direction: column;
		align-items: center;

		.loginIcon {
			margin-top: 15%;
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
			border: 5rpx solid #fff;
		}

		.loginNick {
			color: #fff;
			font-size: 36rpx;
			font-weight: bold;
			padding: 10rpx 0;
		}
	}


	/** 足迹等菜单  */
	.viewport {
		position: relative;

		.container {
			position: absolute;
			top: 400rpx;
			left: 20rpx;
			right: 20rpx;


			.itemList {
				background: #fff;
				display: flex;
				align-items: center;
				border-radius: 10rpx;
				padding: 0 10rpx;

				color: #333;
				font-size: 24rpx;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					background: #fff;
					width: calc((100% - 15px)/4);
					margin: 0 5px 0 0;
					padding: 15rpx 0;

					&:nth-child(4n) {
						margin-right: 0;
					}

					.count {
						font-size: 30rpx;
					}

					.text {
						margin-top: 10rpx;
					}
				}
			}
		}
	}

	/**  我的订单   */
	.order {
		margin-top: 20rpx;
		background: #fff;
		padding: 0 20rpx;
		border-radius: 10rpx;

		.order__title {
			padding: 20rpx 0;
			border-bottom: 1px solid #f4f4f4;
			font-size: 28rpx;
			color: #333;
		}

		.order__list {
			display: flex;
			align-items: center;

			.list__item {

				display: flex;
				flex-direction: column;
				align-items: center;
				width: calc((100% - 15px)/4);
				margin: 0 5px 0 0;
				font-size: 28rpx;
				color: #333;
				// background: orange;
				padding: 20rpx 0;

				&:nth-child(4n) {
					margin-right: 0;
				}

				.item__icon {
					width: 60rpx;
					height: 60rpx;
				}

				.item__text {
					margin-top: 10rpx;
					font-size: 24rpx;
				}
			}
		}
	}

	/**  未登录     */
	.notLoginbox {
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-items: center;
		height: 100vh;
		background: #fff;
		padding: 40rpx;

		.image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			margin-top: 30%;
		}

		.button {
			width: 100%;
			background: #C00000;
			color: #fff;
			border-radius: 50rpx;
			margin: 50rpx 0 20rpx;
			font-size: 32rpx;
			height: 80rpx;
			font-weight: bold;
			text-align: center;

			display: flex;
			align-items: center;
			justify-content: center;
		}

		.text {
			color: gray;
			font-size: 24rpx;
		}
	}
</style>